<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content" class="text-bold"> 路线选择 </block>
		</cu-custom>
		<view class="">
			<view class="drag  radius shadow shadow-lg bg-white margin-top margin-left-lg"
				style="width: 90%; border-radius: 3%;height: 18%;">
				<view class="margin-top margin-left cu-form-group">
					<view class="title text-bold">起点:</view>
					<input class="margin-left" placeholder="请输入起点" name="input" v-model="sadd"
						@input="selectStart"></input>
				</view>
				<view class=" margin-left cu-form-group">
					<view class="title text-bold">终点:</view>
					<input class="margin-left" placeholder="请输入终点" name="input" v-model="dadd"
						@input="selectDest"></input>
				</view>
				<view class="cu-form-group">
					<button @click="selectCompleted" class="bg-blue" style="width: 100%;"> 确定 </button>
				</view>
			</view>
		</view>
		<!--  -->
		<map id="101" style="width: 100%;" :style="[{height:mapHeight+'px'}]" :longitude="longitude"
			:latitude="latitude" scale="13" :polyline="polylines" :markers="markers">
		</map>

		<view class="cu-modal bottom-modal " :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-list menu" style="width: 100%">
					<!-- @click="checkAddress(index)" -->
					<view class="cu-item" v-for="(item,index) in mks" :key="index" @click="confirmAddress(index)">
						<view class="content">
							<text class="title">{{item.title}}</text>
							<text class="cuIcon-check" v-if="index === checkIndex"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMap from '@/static/js/QQMap.js'
	var http = require('@/static/utils/request.js')
	export default {
		name: "map",
		data() {
			return {
				longitude: 0,
				latitude: 0,
				start: {},
				dest: {},
				polylines: [],
				mapHeight: 100,
				screenHeight: 0,
				markers: [],
				mks: [],
				sadd: '',
				dadd: '',
				checkIndex: 0,
				chooseStart: false,
				chooseDest: false,
				showModal: false,
				mapContext: {}
			};
		},
		created() {
			let that = this
			uni.getSystemInfo({
				success: res => {
					that.$data.mapHeight = res.screenHeight
					that.$data.screenHeight = res.screenHeight
				}
			})
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success(res) {
					let latitude = res.latitude
					let longitude = res.longitude
					that.$data.latitude = latitude
					that.$data.longitude = longitude
				}
			})
			this.mapContext = uni.createMapContext('101', this)
		},
		methods: {
			// 选择终点值
			selectDest(e) {
				let value = e.detail.value;
				this.searchPoi(value, {
					latitude: this.latitude,
					longitude: this.longitude
				})
				this.chooseDest = true
			},
			// 选择起点值
			selectStart(e) {
				let value = e.detail.value;
				this.searchPoi(value, {
					latitude: this.latitude,
					longitude: this.longitude
				})
				this.chooseStart = true
			},
			// 选择结束
			selectCompleted() {
				// 先判断是否可以确认
				if (Object.keys(this.$data.start).length <= 0) {
					uni.showToast({
						title: '未选择起点',
						duration: 2000,
						icon: 'none',
						image: '../../static/error.png'
					})
					return
				}
				if (Object.keys(this.$data.dest).length <= 0) {
					uni.showToast({
						title: '未选择终点',
						icon: 'none',
						duration: 2000,
						image: '../../static/error.png'
					})
					return
				}
				// 抛出选择完毕事件
				uni.$emit("startAndDestSelectOK", [this.$data.start, this.$data.dest, this.$data.polylines[0]])
				uni.navigateBack()
			},
			// 先将选中的数据确认   再清空数据
			confirmAddress(index) {
				let selectAddress = this.$data.mks[index]
				let _this = this
				if (this.$data.chooseStart) {
					// 选择起点
					this.$data.sadd = selectAddress.title
					// debugger
					this.$data.start = selectAddress
					http.savePoi(selectAddress).then(res => {
						_this.start.poi = res.data.data
					})
					this.$data.chooseStart = false
					// this.setStartCallout()
				} else if (this.$data.chooseDest) {
					// 选择终点
					this.$data.dadd = selectAddress.title
					this.$data.dest = selectAddress
					http.savePoi(selectAddress).then(res => {
						_this.dest.poi = res.data.data
					})
					this.$data.chooseDest = false
				}
				this.$data.mks = []
				this.$data.checkIndex = 0
				//  如果起点和终点都不为空 进行线路规划
				if (Object.keys(this.$data.start).length > 0 && Object.keys(this.$data.dest).length > 0) {
					this.$data.polylines = []
					//  线路规划失败
					if (!this.direction()) {
						return
					}
					// 计算中心点
					// this.caculateCenterPoint(this.$data.start, this.$data.dest)
					this.setStartAndDestCallout()
					this.$data.selectOK = true
				}
				this.$data.showModal = false
			},
			// 计算中心点的位置
			caculateCenterPoint(start, end) {
				this.$data.latitude = (start.latitude + end.latitude) / 2
				this.$data.longitude = (start.longitude + end.longitude) / 2
			},
			setStartCallout() {
				let markerStart = {
					id: 1,
					latitude: this.$data.start.latitude,
					longitude: this.$data.start.longitude,
					iconPath: "../../static/map/start.png",
					width: 30,
					height: 40
				}

			},
			setDestCallout() {
				let markerDest = {
					id: 2,
					latitude: this.$data.dest.latitude,
					longitude: this.$data.dest.longitude,
					iconPath: "../../static/map/dest.png",
					width: 30,
					height: 40
				}
				this.$data.markers.push(markerDest)
			},
			setStartAndDestCallout() {
				// 设置起点气泡样式
				let markerStart = {
					id: 1,
					latitude: this.$data.start.latitude,
					longitude: this.$data.start.longitude,
					iconPath: "../../static/map/start.png",
					width: 30,
					height: 40,
					callout: {
						content: this.$data.start.title,
						textAlign: 'center',
						display: 'ALWAYS'
					}
				}
				// 设置终点气泡样式
				let markerDest = {
					id: 2,
					latitude: this.$data.dest.latitude,
					longitude: this.$data.dest.longitude,
					iconPath: "../../static/map/dest.png",
					width: 30,
					height: 40,
					callout: {
						content: this.$data.dest.title,
						textAlign: 'center',
						display: 'ALWAYS'
					}
				}
				this.$data.markers.push(markerStart)
				this.$data.markers.push(markerDest)
			},
			checkAddress(index) {
				this.$data.checkIndex = index
			},
			// 导航线路规划
			direction() {
				let that = this
				let result = true
				QQMap.qqmapsdk.direction({
					mode: 'bicycling',
					from: that.$data.start,
					to: that.$data.dest,
					success: function(res) {
						let routes = res.result.routes
						for (let k = 0; k < routes.length; k++) {
							let polyline = {
								points: [],
								color: "#0055ff",
								width: 8,
								arrowLine: true,
							}
							let coors = res.result.routes[k].polyline
							let kr = 1000000
							for (var i = 2; i < coors.length; i++) {
								coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
							}
							//将解压后的坐标放入点串数组pl中
							for (var i = 0; i < coors.length; i += 2) {
								polyline.points.push({
									latitude: coors[i],
									longitude: coors[i + 1]
								})
							}
							that.$data.mapContext.includePoints({
								points: polyline.points,
								padding: [5, 5, 5, 5]
							})
							that.$data.polylines.push(polyline)
						}

					},
					fail: function(error) {
						if (error.status === 384) {}
						result = false
					}
				})
				return result
			},
			// 查询搜索位置
			searchPoi(poiName, position) {
				let that = this
				QQMap.qqmapsdk.search({
					keyword: poiName,
					location: position, //设置周边搜索中心点
					success: function(res) {
						var mks = []
						for (var i = 0; i < res.data.length; i++) {
							mks.push({ // 获取返回结果，放到mks数组中
								title: res.data[i].title,
								id: res.data[i].id,
								latitude: res.data[i].location.lat,
								longitude: res.data[i].location.lng,
								address: res.data[i].address,
								check: false,
								width: 20,
								height: 20
							})
						}
						that.$data.mks = mks
						that.$data.showModal = true
					}
				})
			}
		}
	}
</script>

<style>
	.drag {
		justify-content: center;
		align-items: center;
		position: fixed;
		z-index: 999999;
	}
</style>
